<template>
    <div id="statistics">
        <el-tabs tab-position="left" style="height: 100%;">
            <el-tab-pane :label="$t('账单查询')" style="padding: 20px">

                <el-form :inline="true" class="demo-form-inline">

                    <el-form-item :label="$t('日期范围')">
                        <el-date-picker
                            v-model="date"
                            type="daterange"
                            range-separator="~"
                            :start-placeholder="$t('开始日期')"
                            :end-placeholder="$t('结束日期')">
                        </el-date-picker>

                    </el-form-item>

                    <el-form-item :label="$t('商品类型')">
                        <el-select v-model="productType" filterable placeholder="请选择" style="width: 100px">
                            <el-option v-for="item in productTypeList" :key="item.value"
                                       :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item :label="$t('商品')">
                        <el-select v-model="productId" filterable placeholder="请选择">
                            <el-option
                                v-for="item in productList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">{{ $t('查询') }}</el-button>
                    </el-form-item>

                </el-form>


                <div class="bottom">
                    <div>
                        <span class="text">{{ $t('总价格') }}:</span>
                        <span class="price">{{ sumPrice }}</span>

                        <span class="text">{{ $t('总成本') }}:</span>
                        <span class="price">{{ sumCost }}</span>

                        <span class="text">{{ $t('总利润') }}:</span>
                        <span class="price">{{ sumProfit }}</span>
                    </div>

                    <div>

                    </div>

                </div>

                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="time" :label="$t('销售时间')" width="200"> </el-table-column>
                    <el-table-column prop="number" :label="$t('销售数量')" width="120"> </el-table-column>
                    <el-table-column prop="price" :label="$t('销售单价')" width="120"> </el-table-column>
                    <el-table-column prop="total" :label="$t('销售总价')" width="120"> </el-table-column>
                    <el-table-column prop="account" :label="$t('销售员')" width="120"> </el-table-column>
                </el-table>



            </el-tab-pane>
            <el-tab-pane :label="$t('库存统计')"  style="padding: 20px">

                <el-form :inline="true" class="demo-form-inline">



                    <el-form-item :label="$t('商品类型')">
                        <el-select v-model="productType" filterable placeholder="请选择" style="width: 100px">
                            <el-option v-for="item in productTypeList" :key="item.value"
                                       :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item :label="$t('商品')">
                        <el-select v-model="productId" filterable placeholder="请选择">
                            <el-option
                                v-for="item in productList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="search">{{ $t('查询') }}</el-button>
                    </el-form-item>

                </el-form>

                <div class="bottom">
                    <div>
                        <span class="text">{{ $t('总价值') }}:</span>
                        <span class="price">{{ sumValue }}</span>
                    </div>

                    <div>

                    </div>

                </div>

                <el-table :data="tableData2" border style="width: 100%">
                    <el-table-column prop="name" :label="$t('商品名称')" width="200"> </el-table-column>
                    <el-table-column prop="number" :label="$t('库存数量')" width="120"> </el-table-column>
                    <el-table-column prop="price" :label="$t('单价')" width="120"> </el-table-column>
                    <el-table-column prop="total" :label="$t('总价')" width="120"> </el-table-column>
                </el-table>



            </el-tab-pane>


        </el-tabs>

    </div>
</template>

<script>
export default {
    name: "statistics",
    data(){
        return {
            inOutType:"0",
            sumNumber:120,
            sumCost:2000,
            sumPrice:6000,
            sumProfit:4000,
            sumValue:6000,
            date:[],
            productType:"0",
            productTypeList:[{
                value: '0',
                label: this.$t('全部')
            },{
                value: '1',
                label: this.$t('酒水')
            },{
                value: '2',
                label: this.$t('零食')
            },{
                value: '3',
                label: this.$t('散货')
            }],
            tableData3:[
                {
                    time:"2023/11/22 13:55:30",
                    number:"-10",
                    price:"200",
                    total:"2000",
                    account:"A001",
                },
                {
                    time:"2023/11/22 13:55:30",
                    number:"10",
                    price:"200",
                    total:"2000",
                    account:"A001",
                },
                {
                    time:"2023/11/22 13:55:30",
                    number:"10",
                    price:"200",
                    total:"2000",
                    account:"A001",
                }
            ],
            tableData2:[
                {
                    number:"10",
                    price:"200",
                    total:"2000",
                    name:"棒棒糖",
                },
                {
                    number:"10",
                    price:"200",
                    total:"2000",
                    name:"棒棒糖",
                },
                {
                    number:"10",
                    price:"200",
                    total:"2000",
                    name:"棒棒糖",
                }
            ],
            tableData:[
                {
                    time:"2023/11/22 13:55:30",
                    number:"10",
                    price:"200",
                    total:"2000",
                    account:"A001",
                },
                {
                    time:"2023/11/22 13:55:30",
                    number:"10",
                    price:"200",
                    total:"2000",
                    account:"A001",
                },
                {
                    time:"2023/11/22 13:55:30",
                    number:"10",
                    price:"200",
                    total:"2000",
                    account:"A001",
                }
            ],
            productId:"0",
            productList:[{
                value: '0',
                label: this.$t('全部')
            },{
                value: '黄金糕',
                label: '黄金糕'
            }, {
                value: '双皮奶',
                label: '双皮奶'
            }, {
                value: '蚵仔煎',
                label: '蚵仔煎'
            }, {
                value: '龙须面',
                label: '龙须面'
            }, {
                value: '北京烤鸭',
                label: '北京烤鸭'
            }]
        }
    },
    methods:{
        search(){

        }
    },
    mounted() {


        this.date = [ new Date(), new Date() ]

    }
}
</script>

<style scoped lang="scss">
    #statistics{
        height: 100%;padding: 10px;

        .bottom{
            display: flex; justify-content: space-between;

            color:#666;
            padding:0 20px ;background: #FFF; width: calc( 100% - 20px);
            height: 60px;line-height: 60px;

            .text{

            }
            .price{
                font-size: x-large; margin-right: 20px;color: orangered;
            }
        }
    }
</style>
